<template>
  <div class="Login">
    <section class="main">
      <el-row>
        <el-col :span="16" class="left_logo">
          <div class="logo"></div>
        </el-col>
        <el-col :span="8" class="right_form">
          <el-form
            size="mini"
            id="loginForm"
            action="/ai"
            method="post"
            v-bind:model="loginInfo"
            status-icon
            ref="loginInfo"
            v-bind:rules="rules"
            class="demo-ruleForm"
          >
            <section class="formSec">
              <h1>智能摄像头管理系统</h1>
              <el-form-item prop="name">
                <el-input
                  placeholder="用户"
                  name="username"
                  v-model.trim="loginInfo.name"
                  prefix-icon="iconfont icon-username"
                ></el-input>
              </el-form-item>
              <el-form-item prop="pass">
                <el-input
                  placeholder="密码"
                  name="password"
                  type="password"
                  v-model.trim="loginInfo.pass"
                  auto-complete="off"
                  prefix-icon="iconfont icon-pass"
                  @keyup.enter.native="sbLogin('loginInfo')"
                ></el-input>
              </el-form-item>
              <!-- <el-form-item prop="validNum">
                <el-input
                  class="validNum"
                  placeholder="验证码"
                  name="validNum"
                  v-model.trim="loginInfo.validNum"
                  prefix-icon="iconfont icon-validNum"
                  maxlength="6"
                ></el-input>
                <div class="divIdentifyingCode">
                  <img
                    :src="validcodeUrl"
                    class="imgIdentifyingCode"
                    title="重新获取验证码"
                    onclick="this.src=this.src+'?'"
                  />
                </div>
              </el-form-item> -->
              <el-form-item class="passSet">
                <el-checkbox class="remember" fill="#ff6600" v-model="checked">记住密码</el-checkbox>
                <label class="forget">忘记密码</label>
              </el-form-item>
              <el-form-item>
                <el-button round class="loginBtn" size="medium" v-on:click="sbLogin('loginInfo')">登录</el-button>
              </el-form-item>
            </section>
          </el-form>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script type="text/javascript" src="../api/login.js"></script>

<style lang="scss">
.Login {
  height: 100vh;
  width: 100%;
  position: absolute;
  top: 0;
  > section {
    display: flex;
    flex-direction: column;
    height: 100%;
    > .el-row {
      height: 100%;
      color: #fff;
      .left_logo {
        height: 100%;
        background-color: rgba(241, 241, 241, 1);
        .logo {
          height: 100%;
          background: url(../assets/imgs/login.png) no-repeat;
          background-size: 100% 100%;
          width: 100%;
        }
      }
      .right_form {
        background-color: #1f2548;
        height: 100%;
        display: flex;
        align-items: center;
        .el-form {
          //background-color: aqua;
          height: 500px;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .formSec {
            width: 67%;
            h1 {
              font-size: 30px;
              color: #ffffff;
              text-align: center;
              margin-bottom: 50px;
              font-weight: normal;
              margin-left: -2%;
            }
            .el-form-item {
              margin-bottom: 22px;
              .el-form-item__content {
                .el-button {
                  width: 99%;
                  height: 40px;
                  background-color: #026cd2;
                  color: #fff;
                  font-size: 2.5rem;
                  border: none;
                  border-radius: 0px;
                  margin-top: 8%;
                }
                .el-button:hover {
                  background-color: #b3d2f1;
                }
                .validNum {
                  width: 75%;
                }
              }
            }
            .passSet .el-form-item__content {
              .remember {
                float: left;
                color: #c1c3c9;
                span {
                  font-size: 2rem;
                }
              }
              .forget {
                float: right;
                color: #86b9ea;
                position: relative;
                right: 1%;
                font-size: 2rem;
              }
            }
          }
        }
      }
    }
  }
  .el-input__inner {
    height: 40px;
    width: 99%;
    border-radius: 0px;
    font-size: 2rem;
    border: 1px solid #85899c;
    background-color: #1f2548;
    color: #fff;
  }
  .el-input__icon {
    color: #fff;
  }
  .el-input__suffix {
    right: -8%;
  }
  .divIdentifyingCode {
    position: absolute;
    top: 0px;
    right: 3px;
    z-index: 5px;
    width: 102px;
    height: 40px;
    background-color: #1f2548;
    margin: 0;
    border: 1px solid #85899c;
    .imgIdentifyingCode {
      height: 37px;
      width: 100px;
      cursor: pointer;
    }
  }
}
</style>
